<template>
	<view class="header">
		<u-navbar :bgColor="isScroll ? '#fff' : 'transparent'" :statusBgColor="isScroll ? '#fff' : 'transparent'" :placeholder="placeholder">
			<view :class="['u-nav-slot', !isScroll ? 'bgc_color' : 'bgc_color1']" slot="left">
				<view class="leftItem" @click.stop="returnPage" v-if="pageStack > 1">
					<u-icon name="arrow-left" size="18" color="#ffffff"></u-icon>
				</view>
				<view class="shuline" v-if="pageStack > 1"></view>
				<view class="rightItem" @click.stop="goIndex">
					<u-icon name="home-fill" size="18" color="#ffffff"></u-icon>
				</view>
			</view>
			<view slot="center">
				<slot name="center">
					<view v-if="isScroll || isTitle">
						<view class="search-box">
							<view>{{ title }}</view>
						</view>
					</view>
				</slot>
			</view>
		</u-navbar>
	</view>
</template>

<script>
export default {
	name: 'NavBar',
	props: {
		isScroll: {
			typeof: Boolean,
			default: true
		},
		title: {
			typeof: String,
			default: ''
		},
		// 占位符
		placeholder: {
			typeof: Boolean,
			default: true
		},
		//是否强制展示文字
		isTitle: {
			typeof: Boolean,
			default: false
		}
		// 页面栈
		// pageStack: {
		// 	typeof: Number,
		// 	default: () => getCurrentPages().length
		// }
	},

	data() {
		return {
			pageStack: getCurrentPages().length
		};
	},
	methods: {
		returnPage() {
			uni.navigateBack({
				delta: 1
			});
		},
		goIndex() {
			uni.reLaunch({
				url: '/bill/myBill'
			});
		}
	}
};
</script>

<style lang="scss">
.header {
	width: 100%;

	.box-show {
		width: 50rpx;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		background: rgba(206, 206, 206, 0.5);
	}

	.search-box {
		display: flex;
		align-items: center;
		font-size: 34rpx;
		justify-content: center;
		font-weight: 500;
		position: relative;
		margin-left: 130rpx;
		/* #ifdef H5 || APP-PLUS */
		width: 85%;
		/* #endif */
		/* #ifndef H5 || APP-PLUS */
		width: 90%;
		left: -120rpx;
		/* #endif */
	}
}

.u-nav-slot {
	display: flex;
	align-items: center;
	background-color: #d0d0d0 !important;
	border-radius: 50rpx;
	.leftItem {
		padding: 10rpx 26rpx 10rpx 26rpx;
	}

	.rightItem {
		padding: 10rpx 26rpx 10rpx 26rpx;
		display: flex;
	}

	.shuline {
		opacity: 0.7;
		background-color: #ffffff;
		height: 30rpx;
		width: 1rpx;
		// background: #606162;
		// margin: 0 28rpx 0rpx 24rpx;
	}
}

.bgc_color {
	background: rgba(255, 255, 255, 0.6);
}

.bgc_color1 {
	background: #ffffff;
	border: 1rpx solid #e6e6e6;
}
</style>
